<template>
  <div class="task-config-swapper">
    <!-- 检查是否在详情页路由中，如果是则只显示router-view -->
    <el-card>
      <template v-if="$route.path.includes('configDetail')">
        <router-view />
      </template>
      <template v-else>
        <el-form
          :inline="true"
          v-model="formSearchTaskInfo"
          class="demo-form-inline"
        >
          <div>
            <el-form-item>
              <el-input
                v-model="formSearchTaskInfo.taskName"
                placeholder="请输入任务名称查询"
              />
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="formSearchTaskInfo.dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
                clearable
                :disabled-date="disableFutureDates"
              />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="formSearchTaskInfo.region"
                placeholder="区域"
                clearable
                filterable
                style="width: 100px"
              >
                <el-option
                  v-for="opt in regionOptions"
                  :key="opt.value"
                  :label="opt.label"
                  :value="opt.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="formSearchTaskInfo.status"
                placeholder="状态"
                clearable
                filterable
                style="width: 100px"
              >
                <el-option
                  v-for="opt in statusOptions"
                  :key="opt.value"
                  :label="opt.label"
                  :value="opt.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button plain>重置</el-button>
            </el-form-item>
          </div>
        </el-form>
        <div class="task-tabs-container">
          <el-button
            type="primary"
            @click="handleAddTask"
            style="position: absolute; right: 40px; z-index: 1"
          >
            <el-icon><Plus /></el-icon>
            新增任务
          </el-button>
          <!-- 任务类型Tab切换组件 -->
          <el-tabs
            v-model="activeTab"
            class="task-tabs"
            @tab-change="handleTabChange"
          >
            <!-- 通过遍历生成Tab项 -->
            <el-tab-pane
              v-for="tab in taskTabs"
              :key="tab.name"
              :label="tab.label"
              :name="tab.name"
            >
              <PeriodicTaskContent
                v-if="activeTab === tab.name"
                :tabKey="tab.name"
                @changeTitle="changDrawerTitle"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </el-card>
    <el-drawer
      v-model="drawer"
      size="30%"
      :title="`${drawerTitle}任务`"
      :show-close="false"
    >
      <ConfigDetail :detail-data="detailData" />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { TaskTab } from "./types/index";
import PeriodicTaskContent from "./components/PeriodicTaskContent.vue";
import ConfigDetail from "./ConfigDetail.vue";
const drawer = ref(false);
const drawerTitle = ref("新增");
const detailData = ref({});
const disableFutureDates = (date: Date) => date.getTime() > Date.now();
// search 字段
const formSearchTaskInfo = reactive({
  taskName: "", // 任务名称
  dateRange: "", // 开始日期
  region: "", // 区域
  status: "", // 状态
});
// 区域 Options
const regionOptions = ref([
  { label: "全部", value: "0" },
  { label: "草莓", value: "1" },
  { label: "蓝莓", value: "2" },
]);
// 状态 Options
const statusOptions = ref([
  { label: "全部", value: "0" },
  { label: "待下发", value: "1" },
  { label: "进行中", value: "2" },
  { label: "已结束", value: "3" },
  { label: "已失效", value: "4" },
]);
// 定义tab数量
const taskTabs: TaskTab[] = [
  {
    name: "once",
    label: "单次任务",
  },
  {
    name: "periodic",
    label: "周期任务",
  },
];
// 当前激活的Tab
const activeTab = ref<string>("once");

// Tab切换事件处理
function handleTabChange(name: string) {
  activeTab.value = name;
  // 可以在这里添加Tab切换后的逻辑
}

function changDrawerTitle(title: string, row: any) {
  drawerTitle.value = title;
  drawer.value = true;
  detailData.value = row;
}

// 新增任务按钮点击事件
function handleAddTask() {
  // 跳转到任务详情页面
  // 由于是新增任务，这里不需要传递ID参数
  drawer.value = true;
  detailData.value = {
    id: "",
    taskName: "",
    taskType: activeTab.value,
    startTime: "",
    endTime: "",
    region: "",
    taskStatus: "1", // 默认待下发状态
    description: "",
  };
}
</script>

<style lang="scss" scoped>
.task-config-swapper {
  height: calc(100vh - 100px);
  padding: 20px;
  .el-card {
    height: 100%;
  }

  .el-form-item:last-child {
    float: right;
    margin-right: 0 !important;
  }
  .demo-form-inline {
    width: 100%;
    margin-top: 20px;
  }
}
:deep(.el-card) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

:deep(.el-tabs__nav) {
  flex-wrap: nowrap;
}
</style>
